<template>
  <div class="pagination-wrapper">

    <!--
    background：是否为分页按钮添加背景色
    current-page：当前页数，支持 .sync 修饰符
    page-size：每页显示条目个数，支持 .sync 修饰符
    total：总条目数

    current-change：currentPage改变时会触发
    -->
    <el-pagination
        :background="background"
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :total="total"
        @current-change="handleCurrentChange"/>
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    /*
     * page：当前页面
     */
    page: {
      type: Number,
      default: 0,
      required: true
    },
    /*
     * limit：页面中数据个数
     */
    limit: {
      type: Number,
      default: 8,
      required: true
    },
    background: {
      type: Boolean,
      default: true
    },
    /**
     * 数据总数
     */
    total: {
      type: Number,
      default: 0,
      required: true
    },
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.emit('update:limit', val)
      }
    }
  },
  methods: {
    /**
     * handleCurrentChange：处理当前页面改变的事件
     */
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize})
    }
  }
}
</script>

<style lang="less">
.pagination-wrapper{
  margin-top: 25px;
  .el-pagination{
    float: right;
  }
}
</style>
